<template>
  <div class="polite-list-container">
    <el-card class="search-card">
      <el-form :model="formInline" label-width="100px" inline>
        <el-form-item label="用户ID">
          <el-input v-model="formInline.userId" placeholder="请输入用户ID" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择状态" clearable style="width: 80px;">
            <el-option label="有效" value="1" />
            <el-option label="无效" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="clear">重置</el-button>
          <el-button type="success" @click="addPolite">新增白名单</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <DataTable
        :table-data="tableData"
        :loading="loading"
        :total="total"
        @edit="handleEdit"
        @view="handleView"
        @delete="handleDelete"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <PoliteForm
      v-model:visible="dialogVisible"
      :edit-data="currentEditData"
      @success="handleFormSuccess"
    />

    <!-- 详情弹窗 -->
    <el-dialog title="白名单活动详情" v-model="detailDialogVisible" width="600px">
      <el-form label-width="100px" :model="detailData">
        <el-form-item label="活动ID">
          <span>{{ detailData.id }}</span>
        </el-form-item>
        <el-form-item label="活动名称">
          <span>{{ detailData.politeName }}</span>
        </el-form-item>
        <el-form-item label="活动时间">
          <span>{{ detailData.time }}</span>
        </el-form-item>
        <el-form-item label="活动内容">
          <span>{{ detailData.content }}</span>
        </el-form-item>
        <el-form-item label="店铺数">
          <span>{{ detailData.shops }}</span>
        </el-form-item>
        <el-form-item label="商品数">
          <span>{{ detailData.products }}</span>
        </el-form-item>
        <el-form-item label="活动状态">
          <el-tag :type="getStatusType(detailData.state)">
            {{ getStatusText(detailData.state) }}
          </el-tag>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import DataTable from './component/dataTable.vue'
  import PoliteForm from './component/politeForm.vue'
  import { getPoliteData, delPoliteActivity, getPoliteDetail } from '@/api/active/active_polite'

  // 表单数据
  const formInline = ref({
    userId: '',
    status: ''
  })

  // 表格数据
  const tableData = ref([])
  const loading = ref(false)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  // 弹窗相关
  const dialogVisible = ref(false)
  const detailDialogVisible = ref(false)
  const currentEditData = ref(null)
  const detailData = ref({
    id: undefined,
    politeName: '',
    signTime: '',
    time: '',
    content: '',
    shops: 0,
    products: 0,
    state: 0
  })

  // 搜索
  const search = () => {
    currentPage.value = 1
    getPoliteListData()
  }

  // 清空搜索条件
  const clear = () => {
    formInline.value = {
      userId: '',
      status: ''
    }
    currentPage.value = 1
    getPoliteListData()
  }

  // 新增白名单
  const addPolite = () => {
    currentEditData.value = null
    dialogVisible.value = true
  }

  // 编辑白名单
  const handleEdit = (row: any) => {
    currentEditData.value = row
    dialogVisible.value = true
  }

  // 查看详情
  const handleView = (row: any) => {
    // 获取详细信息
    getPoliteDetail({ id: row.id })
      .then((res: any) => {
        detailData.value = res.data
        detailDialogVisible.value = true
      })
      .catch(() => {
        ElMessage.error('获取详情失败')
      })
  }

  // 删除
  const handleDelete = (row: any) => {
    ElMessageBox.confirm('确定要删除该白名单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        delPoliteActivity({ id: row.id })
          .then(() => {
            ElMessage.success('删除成功')
            getPoliteListData()
          })
          .catch(() => {
            ElMessage.error('删除失败')
          })
      })
      .catch(() => {
        // 取消删除
      })
  }

  // 处理分页大小变化
  const handleSizeChange = (val: number) => {
    pageSize.value = val
    getPoliteListData()
  }

  // 处理当前页变化
  const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getPoliteListData()
  }

  // 获取白名单列表
  const getPoliteListData = () => {
    loading.value = true
    const params = {
      userId: formInline.value.userId,
      status: formInline.value.status ? parseInt(formInline.value.status) : undefined,
      page: currentPage.value,
      pageSize: pageSize.value
    }

    getPoliteData(params)
      .then((res: any) => {
        tableData.value = res.data.list
        total.value = res.data.total
        loading.value = false
      })
      .catch(() => {
        loading.value = false
        ElMessage.error('获取白名单列表失败')
      })
  }

  // 表单提交成功回调
  const handleFormSuccess = () => {
    dialogVisible.value = false
    getPoliteListData()
  }

  // 获取状态文本
  const getStatusText = (state: number) => {
    switch (state) {
      case 0:
        return '活动'
      case 1:
        return '报名进行中'
      case 2:
        return '活动未开始'
      case 3:
        return '活动进行中'
      case 4:
        return '活动已结束'
      default:
        return '未知状态'
    }
  }

  // 获取状态类型
  const getStatusType = (state: number) => {
    switch (state) {
      case 0:
        return '' // 未开始
      case 1:
        return 'primary' // 报名中
      case 2:
        return '' // 未开始
      case 3:
        return 'success' // 进行中
      case 4:
        return 'info' // 已结束
      default:
        return 'info'
    }
  }

  onMounted(() => {
    getPoliteListData()
  })
</script>

<style scoped>
  .polite-list-container {
    padding: 20px;
  }

  .search-card {
    margin-bottom: 20px;
  }

  .table-card {
    margin-top: 20px;
    /* 分页样式已在dataTable组件中定义 */
  }
</style>
